<!--
 * @Author: jhw
 * @Date: 2025-08-07 15:39:25
 * @LastEditors: jhw
 * @LastEditTime: 2025-08-15 10:34:13
 * @Description:
-->
<template>
  <div v-if="store.questionCount > 0">
    <draggable v-model="store.coms" item-key="index" @start="dragstart">
      <template #item="{ element, index }">
        <div
          class="mb-10px"
          @click="clickHandle(index)"
          :key="element.id"
          v-show="!isNoteDesc(element.name)"
          :class="{
            active: store.currentComponentIndex === index,
          }"
        >
          <div class="item py-10px" :title="element.status.title.status">
            {{ serialNum[index] }}.
            {{
              element.status.title.status.length > 10
                ? element.status.title.status.substring(0, 10) + '...'
                : element.status.title.status
            }}
          </div>
        </div>
      </template>
    </draggable>
  </div>
  <div v-else class="tip flex items-center justify-center">请添加题目</div>
</template>

<script setup lang="ts">
import draggable from 'vuedraggable';
import { useEditorStore } from '@/stores/useEditor';
import { isNoteDesc } from '@/types';
import { useSerialNum } from '@/utils/hooks';
import { computed } from 'vue';
import emitter from '@/utils/eventBus';
import { useRoute } from 'vue-router';

const route = useRoute();
const type = route.query.type as string; // 问卷类型

const store = useEditorStore();
const serialNum = useSerialNum(store.coms);
const currentComponentIndex = computed(() => store.currentComponentIndex);

const dragstart = () => {
  store.setCurrentComponentIndex(-1);
};

const clickHandle = (index: number) => {
  if (type === 'detail') return;
  // 如果点击的是当前组件，重置-1
  if (currentComponentIndex.value === index) {
    store.setCurrentComponentIndex(-1);
  } else {
    store.setCurrentComponentIndex(index);
    emitter.emit('scrollToComponent', index);
  }
};
</script>

<style scoped lang="scss">
.item {
  /* outline: 1px solid black; */
  color: var(--font-color-light);
  font-size: var(--font-size-base);
  cursor: pointer;
}
.tip {
  height: calc(100% - 50px);
}
.active {
  transform: scale(1.04);
  transition: 0.5s;
  background-color: var(--border-color);
  border-radius: var(--border-radius-lg);
}
</style>
